<template>
  <transition name="toast-fade">
    <div v-if="visible" class="toast" :class="type">
      {{ message }}
    </div>
  </transition>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, watchEffect } from 'vue'

const props = defineProps({
  message: { type: String, default: '' },
  type: { type: String, default: 'info' }, // info | success | error | warn
  duration: { type: Number, default: 2000 }
})

const visible = ref(false)
let timer = null

onMounted(() => {
  visible.value = true
  timer = setTimeout(() => { visible.value = false }, props.duration)
})

onBeforeUnmount(() => {
  if (timer) clearTimeout(timer)
})

watchEffect(() => {
  // 当 message/type 变化时重置计时
})
</script>

<style>
.toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: #fff;
  z-index: 9999;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.toast.info { background: #2563eb; }
.toast.success { background: #16a34a; }
.toast.error { background: #dc2626; }
.toast.warn { background: #d97706; }

.toast-fade-enter-active, .toast-fade-leave-active { transition: opacity .25s ease, transform .25s ease; }
.toast-fade-enter-from, .toast-fade-leave-to { opacity: 0; transform: translate(-50%, -8px); }
</style>
